<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: bisque;
        }
        #item{
            width: 200px;
            height: 200px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <svg wdith="400" heigth="400">
        <rect x="100" y="100" width="100" height="100" fill="blue" stroke="black" stroke-width="10"/>
    </svg>
    <div class="box">
        box
        <div id="item">
            item
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        let index = 0;
        async function call(){
            console.log("1");
            await console.log("2");
            await new Promise(function(res,rel){
                res();
            }).then((value) => {
                index++;
            });
            console.log(3);
            console.log(index);
        }
        call();
        let op = {
            name:'as',
            cat:"ss",
            age:2
        }
        let box = document.getElementsByClassName("box")[0];
        let item = document.getElementById("item");
        box.onclick=function(e){
            console.log("box");
        }
        item.onclick=function(e){
            console.log("item");
        }
    </script>
</body>
</html>